<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="./02 模块化.html" method="get">
        <div class="input-group">
            <label for="">用户名:</label>
            <input type="text" name="user">
        </div>
        <div class="input-group">
            <label for="">密&emsp;码:</label>
            <input type="text" name="pwd">
        </div>
        <div class="input-group">
            <label for="">手机号:</label>
            <input type="text" name="phone">
        </div>
        <div class="input-group">
            <label for="">邮&emsp;箱:</label>
            <input type="text" name="email">
        </div>
        <div class="input-group">
            <label for="">爱&emsp;好:</label>
            <input type="checkbox" name="hobby" value="sing">
            <input type="checkbox" name="hobby" value="dance">
            <input type="checkbox" name="hobby" value="rap">
            <input type="checkbox" name="hobby" value="basketball">
        </div>
        <div class="input-group">
            <input type="submit" value="提交">
        </div>
    </form>
</body>
<script>
    // 将参数数据队列  解析 为对象

    // http://127.0.0.1:5500/day14/html/login.html?user=a123123&pwd=123123&phone=17386141516&email=1272071496%40qq.com

    var search = location.search; // "?user=a123123&pwd=123123&phone=17386141516&email=1272071496%40qq.com"
    var data = {};
    if (search) {
        console.log(search);
        var str = search.substring(1);  // "user=a123123&pwd=123123&phone=17386141516&email=1272071496%40qq.com"
        console.log(str);

        var list = str.split("&");  // []
        console.log(list);

        for (var i = 0; i < list.length; i++) {
            var item = list[i];  // 'user=a123123', 'pwd=123123'
            var key = item.split("=")[0]; // "user"  "pwd"
            var val = item.split("=")[1]; // "a123123"
            console.log(item, key, val);

            data[key] = val;
        }

    }


</script>
<script>

    var data = {
        user: "a123123",
        pwd: "123123",
        phone: "17386141517",
        email: "a1123123@163.com",
        hobby: ["sing", "dance", "rap", "basketball"],
    }

    // var list = [];
    // for (var key in data) {    // key => "user"
    //     var val = data[key];  // "a123123"
    //     var str = key + "=" + val;  // "user=a123123"
    //     list.push(str);
    // }
    // console.log(list);


    var list = [];
    for (var key in data) {    // key => "user"
        var val = data[key];  // "a123123"

        if (Array.isArray(val)) {
            for (var i = 0; i < val.length; i++) {
                var item = val[i];
                var str = key + "=" + item;  // "user=a123123"
                list.push(str);
            }
        } else {
            var str = key + "=" + val;  // "user=a123123"
            list.push(str);
        }

    }
    data = list.join("&");
    console.log(data);




</script>

</html>